<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="app"></div>
</body>

<script>
  /**
   * 介绍一下Watcher
   * 
   * Watcher的第1参数是this指向，
   * 第2个参数就是副作用函数，副作用函数指的是当响应式数据修改时，会自动执行的函数
   * 第3个参数叫回调函数，当副作用函数两次返回值不一样时候，会执行的函数
  */
  window.app = new Vue({ el: '#app' });

  /**
   * 3种方式可以生成watcher
   * + 挂载：必须el/mounted
   * + wathch
   * + computed
  */
  const Watcher = app._watcher.constructor;

  // 响应式数据
  const data = Vue.observable({
    name: 1
  });

  new Watcher(
    // 参数1： 作用域，必须包含_watchers
    {
      _watchers: [],
    },
    // 参数2：副作用函数，当响应式数据修改时，自动执行
    function() {
      // 响应式：依赖收集
      data.a
      console.log('自动执行了', this, 11)
      return Date.now()
    },
    // 参数3：回调函数，2次副作用函数返回值不一样会自动执行
    function(a,b) {
      console.log('cb', this, a, b)
    }
  )


  // 测试------------------
  data.a = 12 
  // 第一行： 【'自动执行了', { _watchers: [] }, 11】
  // 第二行：【 cb, { _watchers: [] }, 1723693676526, 1723693676715 】
</script>
</html>
